<template>
    <div  class="see-trr">
        <a-input-search v-model:value="searchValue" class="search-input" placeholder="搜索" />
        <div style="height: 40px;"></div>
        <div class="the-tree">
        <a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :tree-data="treeData"
            @expand="onExpand"
            @select="select"
            
            >
            <template #title="{ title, type }">
                <span v-if="title.indexOf(searchValue) > -1">
                   
                    <HomeOutlined v-if="type == 'BASE'" class="jidi"/>
                    {{ title.substring(0, title.indexOf(searchValue)) }}
                    <span style="color: #f50">{{ searchValue }}</span>
                    {{ title.substring(title.indexOf(searchValue) + searchValue.length) }}
                </span>
                <span v-else>
                    <HomeOutlined v-if="type == 'BASE'" class="jidi"/>
                    {{ title }}
                </span>
            </template>
        </a-tree>
    </div>
    </div>
</template>
<script setup lang="ts">
import { MapPoinitType } from '@/components/Amap/MapPointType';
import type { Land } from '@/types/Land';
import type { Base } from '@/types/Base';
import type { TreeProps } from 'ant-design-vue';
import { ref, watch } from 'vue';
import {HomeOutlined } from "@ant-design/icons-vue";
const props = defineProps<{
    baseList: Base[],
    landList: Land[]
}>()
const emit = defineEmits<{
    select: [MapPoinitType, Base | Land]
}>()
const expandedKeys = ref<any[]>([]);
const searchValue = ref<string>('');
const autoExpandParent = ref<boolean>(true);
const treeData = ref<any[]>([]);

const onExpand = (keys: string[]) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
};

watch(searchValue, value => {
   let list:any[] = []
   for(let base of treeData.value){
    for(let land of base.children){
        if(land.title.indexOf(searchValue.value) > -1){
            list.push(base.key)
        }
    }
   }

   list = [...new Set(list)]
    
    expandedKeys.value = list;
    searchValue.value = value;
    autoExpandParent.value = true;
});

watch(() => props.baseList, () => {
    init()
})
watch(() => props.landList, () => {
    init()
})

const init = () => {
    let baseList = props.baseList.map(item => {
        return {
            key: Math.random(),
            title: item.name,
            children: [] as any[],
            type: MapPoinitType.BASE,
            data: item
        }
    })
    let landList = props.landList.map(item => {
        return {
            key: Math.random(),
            title: item.name,
            children: [] as any[],
            type: MapPoinitType.LAND,
            data: item
        }
    })

    for(let base of baseList){
        
        for(let land of landList){
            if(land.data.baseId == base.data.id){
                base.children.push(land)
            }
        }
    }
    treeData.value = baseList
    console.log(treeData.value)
}

const select = (key:any , {node}:any) => {

    emit('select', node.type, node.data)
}

</script>
<style scoped>
.see-trr{
    position: relative;
    height: 100%;

}
.search-input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.the-tree{
    height: 90%;
    overflow-y: scroll;
}
.jidi{
    margin: 0 10px 0 0;
    /* color: #fff; */
}
</style>
